<template>
  <div class="approval-process-container">
    <!-- 标题 -->
    <div class="pro-title">
      <van-divider
        :style="{ 
          borderColor: '#3669f8',
          padding: '0 16px',
          margin: '0 0 10px'
        }"
      >
        <span class="title-text">审批流程</span>
      </van-divider>
    </div>

    <!-- 审批流程 -->
    <div class="approval-body">
      <van-steps 
        direction="vertical"
        :active="active"
        active-color="#4C93F8"
      >
        <!-- 发起申请步骤 -->
        <van-step>
          <div class="step-content">
            <div class="step-header">
              <span class="step-name">发起申请</span>
            </div>
            <div class="step-info">
              <p class="info-text">{{ detail.departName }}：{{ detail.applyUserName }}</p>
              <p v-if="detail.applyTime" class="info-time">{{ detail.applyTime }}</p>
            </div>
          </div>
        </van-step>

        <!-- 审批步骤列表 -->
        <van-step 
          v-for="(item, index) in detail.approvalList" 
          :key="index"
        >
          <div class="step-content">
            <div class="step-header">
              <span 
                :class="[
                  'step-name',
                  {
                    'pending': item.result === 1,
                    'passed': item.result === 2,
                    'rejected': item.result === 3,
                    'cancelled': item.result === 9
                  }
                ]"
              >
                {{ getStatusText(item.result) }}
              </span>
            </div>
            <template v-if="item.result !== 9">
              <div class="step-info">
                <p class="info-text">{{ item.roleName }}：{{ item.name }}</p>
                <p v-if="item.comment && item.result !== 1" class="info-comment">
                  {{ item.comment }}
                </p>
                <p v-if="item.endTime && item.result !== 1" class="info-time">
                  {{ item.endTime }}
                </p>
              </div>
            </template>
          </div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApprovalProcess',

  props: {
    detail: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      active: 3
    }
  },

  methods: {
    getStatusText(result) {
      const statusMap = {
        1: '待审批',
        2: '已通过',
        3: '已驳回',
        9: '已撤回'
      }
      return statusMap[result] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.approval-process-container {
  .pro-title {
    .title-text {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .approval-body {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 17px 14px;

    .step-content {
      padding: 5px 0;

      .step-header {
        margin-bottom: 5px;
        
        .step-name {
          font-size: 14px;
          color: #333;

          &.pending {
            color: #ff8832;
          }
          &.passed {
            color: #23d24c;
          }
          &.rejected {
            color: #e03e3e;
          }
          &.cancelled {
            color: #999;
          }
        }
      }

      .step-info {
        .info-text {
          font-size: 12px;
          color: #696969;
          margin-bottom: 5px;
        }

        .info-comment,
        .info-time {
          font-size: 12px;
          color: #999;
          margin-bottom: 5px;
        }
      }
    }
  }
}

// 覆盖 Vant 步骤条样式
.van-step {
  &__circle {
    background-color: #4C93F8;
    width: 15px;
    height: 15px;
  }

  &__line {
    border-left: 1px dashed #4C93F8;
  }
}
</style>